everyday<template>
  <div class="app-container">
    <div class="dataTable">
      <el-form :inline="true" label-position="right" label-width="120px" style="width:750px; margin:10px auto;">
        <el-form-item label="单据日期" prop="billDate">
          <el-date-picker v-model="form.billDate" :editable="false" class="input-item" type="date" placeholder="单据日期" size="small" :clearable="false" value-format="yyyy-MM-dd" disabled />
        </el-form-item>
        <el-form-item label="单据号" prop="billNo">
          <el-input v-model="form.billNo" size="small" class="input-item" placeholder="单据号" disabled />
        </el-form-item>
        <el-form-item label="上次截止日期" prop="billDate">
          <el-date-picker v-model="form.beginDate" :editable="false" class="input-item" type="date" placeholder="上次截止日期" size="small" disabled :picker-options="pickerOptions" :clearable="false" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="本次截止日期" prop="billDate">
          <el-date-picker v-model="form.endDate" :editable="false" class="input-item" type="date" placeholder="本次截止日期" size="small" :picker-options="pickerOptions" :clearable="false" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="业务员" prop="staffId">
          <el-select v-model="form.staffId" class="input-item" disabled placeholder="选择业务员" size="small">
            <el-option v-for="item in stafflist" :key="item.id" :label="item.staffName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="销售单数" prop="soBillNum">
          <el-input v-model="form.soBillNum" size="small" class="input-item" placeholder="销售单数" disabled />
        </el-form-item>
        <el-form-item label="销售退款单数" prop="soReturnedBillNum">
          <el-input v-model="form.soReturnedBillNum" size="small" class="input-item" placeholder="销售单数" disabled />
        </el-form-item>
        <el-form-item label="预收单数" prop="psBillNum">
          <el-input v-model="form.psBillNum" size="small" class="input-item" placeholder="预收单数" disabled />
        </el-form-item>
        <el-form-item label="预收退款单数" prop="psReturnedBillNum">
          <el-input v-model="form.psReturnedBillNum" size="small" class="input-item" placeholder="预收退款单数" disabled />
        </el-form-item>
        <el-form-item label="收款单数" prop="receiptBillNum">
          <el-input v-model="form.receiptBillNum" size="small" class="input-item" placeholder="收款单数" disabled />
        </el-form-item>
        <el-form-item label="付款单数" prop="paymentNum">
          <el-input v-model="form.paymentNum" size="small" class="input-item" placeholder="付款单数" disabled />
        </el-form-item>
        <el-form-item label="销售现金金额" prop="soCurrAmount">
          <el-input v-model="form.soCurrAmount" size="small" class="input-item" placeholder="销售现金金额" disabled />
        </el-form-item>
        <el-form-item label="销售退款现金金额" prop="soReturnedCurrAmount">
          <el-input v-model="form.soReturnedCurrAmount" size="small" class="input-item" placeholder="销售退款现金金额" disabled />
        </el-form-item>
        <el-form-item label="预收款现金金额" prop="psCurrAmount">
          <el-input v-model="form.psCurrAmount" size="small" class="input-item" placeholder="预收款现金金额" disabled />
        </el-form-item>
        <el-form-item label="预收款退款现金金额" prop="psReturnedCurrAmount">
          <el-input v-model="form.psReturnedCurrAmount" size="small" class="input-item" placeholder="预收款退款现金金额" disabled />
        </el-form-item>
        <el-form-item label="收款现金金额" prop="receiptCurrAmount">
          <el-input v-model="form.receiptCurrAmount" size="small" class="input-item" placeholder="收款现金金额" disabled />
        </el-form-item>
        <el-form-item label="付款现金金额" prop="paymentCurrAmount">
          <el-input v-model="form.paymentCurrAmount" size="small" class="input-item" placeholder="付款现金金额" disabled />
        </el-form-item>
        <el-form-item label="现金合计" prop="sumCurrAmount">
          <el-input v-model="form.sumCurrAmount" size="small" class="input-item" placeholder="现金合计" disabled />
        </el-form-item>
        <el-form-item label="开始余额" prop="beginBalance" class="pr20">
          <el-tooltip class="item day" effect="dark" content="上次交款后剩余应交金额" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-input v-model="form.beginBalance" size="small" class="input-item" placeholder="开始余额" disabled />
        </el-form-item>
        <el-form-item label="交款金额" prop="settleCurrAmount">
          <el-input v-model="form.settleCurrAmount" size="small" class="input-item" placeholder="交款金额" @focus="focusThis($event)" />
        </el-form-item>
        <el-form-item label="余额" prop="balance" class="pr20">
          <el-tooltip class="item day" effect="dark" content="余额=开始余额+现金合计-交款金额" placement="bottom">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-input v-model="form.balance" size="small" class="input-item" placeholder="余额" disabled />
        </el-form-item>
      </el-form>
      <div class="tx-c" style="margin-top:15px">
        <el-button v-if="$route.path.indexOf('etail') < 0" class="submitBtn" type="primary" @click="save">保 存</el-button>
        <el-button v-else class="submitBtn" type="primary" @click="$store.dispatch('tagsView/delView', $route);$router.replace('/sale/everyday')">返 回</el-button>
      </div>
    </div>
    <el-dialog :close-on-click-modal="false" title="选择截止日期" :visible.sync="dialogVisible" :show-close="false" width="420px">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="108px" style="width:400px; margin-left:10px;">
        <el-form-item label="业务员" prop="staffId">
          <el-select v-model="form.staffId" style="width:240px" placeholder="选择业务员" size="small" @change="staffChange">
            <el-option v-for="item in stafflist" :key="item.id" :label="item.staffName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="上次截止日期" prop="beginDate">
          <el-date-picker v-model="form.beginDate" :editable="false" class="input-item" type="date" placeholder="上次截止日期" size="small" :clearable="false" disabled :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
        </el-form-item>
        <el-form-item label="截止日期" prop="endDate">
          <el-date-picker v-model="form.endDate" :editable="false" class="input-item" type="date" placeholder="截止日期" size="small" :clearable="false" :picker-options="pickerOptions" value-format="yyyy-MM-dd" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="default" @click="cancelThis">取消</el-button>
        <el-button type="primary" @click="initEveryday">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveEverydayTotal, queryDataByStaffId, getEverydayTotalById, getMaxDateByStaffId } from '@/api/sale'
import { getStaff } from '@/api/basedata'
export default {
  name: 'EverydayAdd',
  data() {
    return {
      id: '',
      isDisabled: false,
      status: this.$route.query.status,
      invCatgList: [],
      stafflist: [],
      form: {},
      dialogVisible: false,
      settleData: [{}, {}, {}, {}, {}],
      rules: {
        staffId: [{ required: true, message: '业务员不能为空', trigger: 'change' }],
        endDate: [{ required: true, message: '截止日期不能为空', trigger: 'change' }]
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  created() {
    getStaff().then(res => {
      this.stafflist = res.data.data || []
    })
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      getEverydayTotalById(this.id).then(res => {
        this.form = res.data.data || {}
      })
    } else {
      this.showModal()
    }
  },
  beforeDestroy() {
    this.dialogVisible = false
  },
  methods: {
    staffChange(staffId) {
      console.log(staffId)
      getMaxDateByStaffId({ staffId }).then(res => {
        this.form.beginDate = res.data.data
      })
    },
    focusThis(e) {
      e.currentTarget.select()
    },
    showModal() {
      this.dialogVisible = true
    },
    initEveryday() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = this.form
          queryDataByStaffId(data).then(res => {
            this.temp = res.data.data
            this.dialogVisible = false
          })
        }
      })
    },
    save() {
      this.form.id = this.id
      saveEverydayTotal(this.form).then(res => {
        if (res.data.errorCode === '0') {
          this.$message.success(res.data.msg)
          this.$store.dispatch('tagsView/delView', this.$route)
          this.$router.replace('/sale/everyday')
        }
      }).catch(() => {
        this.$message.error('保存失败，请稍后重试！')
      })
    },
    cancelThis() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.replace('/sale/everyday')
    }
  }
}
</script>
<style scoped>
.input-item{width: 240px!important;}
.input-item .el-input--small{width: 240px!important}
.input-item .el-input__inner{width: 240px!important}
</style>
<style lang="scss" scoped>
>>>.pr20 label{padding-right: 30px;}
.el-form-item .el-icon-question.day {
    margin-right: 5px;
    margin-left: -25px;
}
</style>

